<script setup lang="tsx">
// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 模块导入 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++
import { onMounted, reactive, shallowRef } from 'vue';
import { useBoolean } from '@sa/hooks';
import { fetchGetCjProjectOptions } from '@/service/api';
import ProgressTable from './modules/progress-table.vue';

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 组件名称 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

defineOptions({
  name: 'SamplingProgressView'
});

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 类型常量 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 组合式函数 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

const { bool: mainVisible, setTrue: showMain } = useBoolean();

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 父子传参 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架模型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务模型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

const projectTreeDataList = shallowRef<Api.Sampling.CjProject.ProjectTreeData[]>([]);

const selectedProjectTreeData: Api.Sampling.CjProject.ProjectTreeData = reactive(createProjectTreeData());

function createProjectTreeData() {
  return {
    id: '',
    name: ''
  };
}

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架方法 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务方法 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

function initProjectTreeDataList(projectTreeData: Api.Sampling.CjProject.ProjectTreeData | null) {
  Object.assign(selectedProjectTreeData, projectTreeData);
  getProjectList();
}

async function getProjectList() {
  const { error, data } = await fetchGetCjProjectOptions();
  if (!error && data) {
    const treeData: Api.Sampling.CjProject.ProjectTreeData[] = [];
    data.forEach(item => {
      treeData.push({
        id: item.value,
        name: item.label
      });
    });
    projectTreeDataList.value = treeData;
  }
}

function handleSelectProject(node: NaiveUI.TreeOption | null, action: string) {
  if (action === 'select') {
    showMain();
    Object.assign(selectedProjectTreeData, node);
  }
}

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架生命周期 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务生命周期 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

onMounted(() => {
  initProjectTreeDataList(null);
});
</script>

<template>
  <div class="h-full flex">
    <NGrid :x-gap="8" :y-gap="8" item-responsive responsive="screen" cols="6" class="h-full-hidden">
      <NGridItem span="1" class="h-full-hidden">
        <NCard
          size="small"
          class="h-full sm:flex-1-hidden"
          content-class="h-full-hidden"
          :bordered="false"
          :segmented="{
            content: true
          }"
        >
          <template #header>
            <icon-fe-layer class="h-full cursor-move text-icon" />
            项目列表
          </template>
          <template #header-extra>
            <NButton quaternary @click="initProjectTreeDataList(null)">
              <template #icon>
                <SvgIcon icon="ic:round-refresh" />
              </template>
            </NButton>
          </template>
          <NTree
            :data="projectTreeDataList"
            block-line
            class="flex-col-stretch"
            key-field="id"
            label-field="name"
            virtual-scroll
            :show-irrelevant-nodes="false"
            @update-selected-keys="(_key, _option, { node, action }) => handleSelectProject(node, action)"
          />
        </NCard>
      </NGridItem>
      <NGridItem span="5">
        <ProgressTable v-show="mainVisible" :project-data="selectedProjectTreeData" />
        <NCard v-show="!mainVisible" :bordered="false" size="small" class="h-full">
          <NEmpty description="请选择左侧采样项目" class="h-full justify-center" />
        </NCard>
      </NGridItem>
    </NGrid>
  </div>
</template>

<style lang="scss" scoped>
/** tree style */
:deep(.n-tree) {
  .n-tree-node-content {
    --uno: px-8px py-4px;
  }
  .n-tree-node-content:hover .n-tree-node-content__suffix {
    display: inline-flex;
  }
}
</style>
